<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'
const checked1 = ref(true)
const router = useRouter();


</script>
<template>
    <!-- 阅读须知 -->
    <div class="content-container1">
        <div class="header">
            <span>本页面资料由B站up</span>
            <img src="@/assets/lys.jpg" alt="Icon" class="icon" />
            <a href="https://space.bilibili.com/29014773" class="link">怜银丝</a>
            <span>收集提供</span>
        </div>
        <div class="notice">
            <h3>阅读须知：</h3>
            <ul>
                <li>该设定集非官方资料，仅由玩家自行整理，并非权威资料，仅具备一定参考价值，并作为了解游戏背景故事的辅助资料。</li>
                <li>没有实装进游戏内的角色采用网图和AI绘图进行制作，请注意甄别。</li>
                <li>该设定集目前仍在进行编写工作，预计顺序为：组织（国家）栏，事件栏，角色总概述，时间轴，关系网，如需提前了解或提出意见，请加群：486769080。</li>
            </ul>
        </div>
    </div>
    <!-- 资料分类 -->
    <div class="content-container2">
        <div class="categories">

            <!-- 重要设定 -->
            <div class="category">
                <h3>重要设定</h3>
                <el-row>
                    <el-col :span="2" style="padding: 10px 0;">
                        <el-check-tag :checked="checked1" type="primary" @click="router.push('/ai')">
                            AI
                        </el-check-tag>
                    </el-col>
                </el-row>
            </div>

            <!-- 组织栏 -->
            <div class="category">
                <h3>组织栏</h3>
                <el-row class="organ"> <!-- 调整间隔 -->

                    <el-check-tag :checked="checked1" type="primary" @click="router.push('/anjian')">
                        暗剑修会
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="success" @click="router.push('/baihua')">
                        白桦岭能源研究所
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="info" @click="router.push('/chuan')">
                        川
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="warning" @click="router.push('/feilante')">
                        费兰特
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="danger" @click="router.push('/kanpana')">
                        坎帕纳
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="primary" @click="router.push('/kesuoer')">
                        科索尔（前）
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="success" @click="router.push('/shizixing')">
                        十字星娱乐公司
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="info" @click="router.push('/xinxiwang')">
                        新希望
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="warning" @click="router.push('/xinyidian')">
                        新伊甸研究所
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="danger" @click="router.push('/xinzhengfu')">
                        新政府【暂称】
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="primary" @click="router.push('/yinxiuhui')">
                        隐修会
                    </el-check-tag>
                     

                </el-row>
            </div>

            <!-- 事件栏 -->
            <div class="category">
                <h3>事件栏</h3>
                <el-row class="organ"> <!-- 调整间隔 -->

                    <el-check-tag :checked="checked1" type="primary" @click="router.push('/alpha')">
                        阿尔法防卫战
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="success" @click="router.push('/spark')">
                        第一次火种计划
                    </el-check-tag>
                    <el-check-tag :checked="checked1" type="info" @click="router.push('/war')">
                        奇点战争
                    </el-check-tag>
                     
                </el-row>
            </div>

            <!-- 角色栏 -->
            <div class="category">
                <h3>角色栏</h3>
                <el-row class="organ"> <!-- 调整间隔 -->

                    <el-check-tag :checked="checked1" type="primary" @click="router.push('/role')">
                        角色栏
                    </el-check-tag>
                     
                </el-row>
            </div>

            <!-- 关系网 -->
            <div class="category">
                <h3>关系网</h3>
                <el-row class="organ"> <!-- 调整间隔 -->

                    <el-check-tag :checked="checked1" type="primary" @click="router.push('/relate')">
                        关系网
                    </el-check-tag>
                     
                </el-row>
            </div>

             <!-- 时间轴 -->
             <div class="category">
                <h3>时间轴</h3>
                <el-row class="organ"> <!-- 调整间隔 -->

                    <el-check-tag :checked="checked1" type="primary" @click="router.push('/time')">
                        时间轴
                    </el-check-tag>
                     
                </el-row>
            </div>

        </div>
    </div>
</template>

<style scoped lang="scss">
// 阅读须知
.content-container1 {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;


    .header {
        text-align: center;
        margin-bottom: 20px;
        font-size: 18px;
        color: #333;

        .icon {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-right: 5px;
        }

        .link {
            color: #007BFF;
            text-decoration: none;
            font-weight: bold;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .notice {
        background-color: #fff;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        h3 {
            margin-bottom: 10px;
            color: #007BFF;
            font-weight: bold;
        }

        ul {
            list-style-type: decimal;
            margin-left: 20px;

            li {
                margin-bottom: 10px;
                line-height: 1.6;
                color: #555;
            }
        }
    }

}

// 资料分类
.content-container2 {
    margin-top: 20px;

    .categories {

        .category {
            padding: 15px;

            .organ {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: center;
                gap: 28px;
                /* 控制标签之间的间距 */
                padding: 10px 0;
 
            }

            h3 {
                margin-bottom: 10px;
                font-weight: bold;
                font-size: 25px;
                border-bottom: 5px solid #000;
            }

        }
    }
}
</style>